<script lang="ts" setup>
import { onPageScroll } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
// typescript
const emits = defineEmits<{
  (e: "share"): void
  (e: "nav-change", value: number): void
}>();
const state = reactive({
  screenHeight: uni.getSystemInfoSync().screenHeight,
  opacity: 0,
  navIndex: 0
});
const test = ref(["商品", "评价", "详情", "推荐"]);

// 设置透明度
const setOpacity = (scrollTop: number) => {
  const v = (scrollTop * 0.05) / 10;
  state.opacity = v;
}

// 分享按钮点击
const onShare = () => {
  emits('share');
}

// 头部导航点击
const onNavChange = (index: number) => {
  state.navIndex = index;
  emits("nav-change", index);
}

// 监听页面滚动 由父级调用 组件内 小程序无法监听页面滚动
const scrollPage = (ev: { scrollTop: number }) => {
  setOpacity(ev.scrollTop);
}

defineExpose({
  scrollPage
});
</script>

<!-- 详情头部导航 -->
<template>
  <view class="w-components-container header-nav">
    <view class="statusbar"></view>
    <view class="headerbar">
      <template v-if="$slots.header">
        <slot name="header"></slot>
      </template>
      <template v-else>
        <!-- 返回按钮 -->
        <view>
          <navigator open-type="navigateBack">
            <view class="circle-btn" hover-class="hover-class-opacity">
              <text class="iconfont">&#xe604;</text>
            </view>
          </navigator>
        </view>
        <!-- 锚点按钮 -->
        <view class="anchor-point-view" :style="{ opacity: state.opacity }">
          <template v-for="(item, itemIndex) in test">
            <view @click="onNavChange(itemIndex)" :class="{ actived: state.navIndex == itemIndex }">{{ item }}</view>
          </template>
        </view>
        <!-- 分享按钮 -->
        <view>
          <!-- 小程序端不显示 -->
          <!--  #ifdef APP-PLUS -->
          <view @click="onShare" class="circle-btn" hover-class="hover-class-opacity">
            <text class="iconfont">&#xe86e;</text>
          </view>
          <!--  #endif -->
        </view>
      </template>
    </view>
    <view class="mask" :style="{ opacity: state.opacity }"></view>
  </view>
</template>

<style scoped lang="scss">
// scss
$header-height: 44px;

.header-nav {
  position: fixed;
  width: 100%;
  height: calc($header-height + var(--status-bar-height));
  left: 0;
  top: 0;
  z-index: 3;
  background-color: transparent;

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: $theme-background;
    opacity: 0;
    transition: .1s opacity;
  }

  .headerbar {
    height: $header-height;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    position: relative;
    z-index: 2;
    display: flex;
  }
}

.anchor-point-view {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  opacity: 0;

  >view {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40rpx;
    border-bottom: 2px solid transparent;

    &:last-child {
      margin-right: 0;
    }

    &.actived {
      border-color: #fff;
      color: #fff;
    }

    text {
      font-size: 28rpx;
    }
  }
}

.circle-btn {
  $size: 48rpx;
  width: $size;
  height: $size;
  line-height: $size;
  text-align: center;
  border-radius: 50%;
  background-color: rgba($color: #000000, $alpha: 0.3);

  text {
    color: #fff;
  }
}
</style>